<template>
  <div>
    <div class="content-wrapper">
      <div class="content">
        <div class="banner-wrapper">
          <div class="fixed_toolbar">
            <!-- 返回框 -->
            <div class="returnWrapper">
              <div class="backBtn" @click="getReturn">
                <img src="@/assets/images/leftArrow.png" />
                <span>返回</span>
              </div>
              <div class="center">
                <span>{{this.title}}</span>
              </div>
            </div>
          </div>
        </div>
        <van-list
          class="mt-6"
          v-model="loading"
          loading-text="更多礼品正在备货中"
          :finished="finished"
          @load="getList"
        >
          <ul class="gift-ul" v-if="list.length>0">
            <router-link
              class="gift-item"
              tag="li"
              :to="{path: item.buyLimit === 0 ? '/error':'/points/detail', query:{ id: item.id}}"
              v-for="(item,index) in list"
              :key="index"
            >
              <div class="gift-pic">
                <img v-lazy="imgBaseUrl + item.ico" class="pic" />
              </div>
              <div class="info">
                <h2 class="name">{{item.title}}</h2>
                <div class="bottom_info">
                  <div>
                    <div class="kid">
                      <p style="color:red">¥ {{item.price}}</p>
                      <del>￥{{item.oPrice}}</del>
                    </div>
                    <p>库存：{{item.limitNum}}</p>
                  </div>
                  <button
                    class="exchange-btn"
                    :class="{'no-stock':item.limitNum===0}"
                  >{{item.limitNum !==0 ? '立即购买' : '敬请期待'}}</button>
                </div>
              </div>
            </router-link>
          </ul>
        </van-list>
        <div class="end" v-if="list.length>0 && !loading">没有更多数据了</div>
        <noData v-if="list.length<1 && !loading" />
      </div>
    </div>
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { List, Search } from 'vant';
import noData from '@/components/noData/nodata3';
import { imgBaseUrl } from '@/config/env';
export default {
  data() {
    return {
      value: '',
      imgBaseUrl,
      list: [],
      loading: false,
      finished: false,
      // tabsParam: ['积分礼遇', '沃德生日礼遇'], // 这个也可以用对象key，value来实现
      nowIndex: 0, // 默认第一个tab为激活状态
      pageNum: 1,
      title: '', // 提交给服务器的标题关键字
      autoFixed: false,
      // userInfo: [],
      cid: ''
      // menuData: []
    };
  },
  created() {
    // this.getList();
    this.title = JSON.parse(this.$route.query.p);
  },
  mounted() {
    this.cid = this.$route.query.cid;
    if (this.cid === 5 || this.cid === '5') {
      this.nowIndex = 1;
      this.cid = null;
    }
    // this.getUser();
  },
  methods: {
    // 点击返回列表
    getReturn() {
      this.$router.go(-1);
    },
    onScroll() {
      const scrolled =
        document.documentElement.scrollTop || document.body.scrollTop;
      let headerHeight = null;
      if (document.getElementsByClassName('header-fake')[0]) {
        headerHeight = document.getElementsByClassName('header-fake')[0]
          .offsetTop;
      }
      // 当滚动的距离等于A区的高度的时候，即是临界点，马上通过auto_fixed变量，给B
      if (scrolled >= headerHeight) {
        this.autoFixed = true;
      } else {
        this.autoFixed = false;
      }
    },
    // getList() {
    //   this.nowIndex === 0 ? this.getList1() : this.getBirthlist();
    // },
    // 获取list列表
    getList() {
      this.$http
        .post('/product/list', {
          pageNum: this.pageNum.toString(),
          pageSize: '10',
          title: this.title,
          categoryId: this.cid ? this.cid.toString() : null
        })
        .then(res => {
          if (res) {
            if (res.data.code === '0') {
              res.data.object.list.map(n => {
                // 循环添加到数组
                this.list.push(n);
              });
              this.loading = false;
              this.pageNum = this.pageNum + 1; // 页数累加
              if (res.data.object.isLastPage === true) {
                this.finished = true; // 最后一页加载结束
              }
            }
          }
        });
    }
    // 获取生日列表
    // getBirthlist() {
    //   this.$http.post('/coin/birthlist', {}).then(res => {
    //     if (res.data.code === '0') {
    //       res.data.object.list.map(n => {
    //         // 循环添加到数组
    //         this.list.push(n);
    //       });
    //       this.loading = false; // ????
    //       this.pageNum = this.pageNum + 1; // 页数累加
    //       if (res.data.object.isLastPage === true) {
    //         this.finished = true; // 最后一页加载结束
    //       }
    //     }
    //   });
    // }
  },
  components: {
    noData,
    'van-list': List,
    'van-search': Search
  }
};
</script>

<style lang="scss" scoped>
.mt-6 {
  margin-top: 0.6rem;
}
.content-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.content {
  margin-top: 50px;
  overflow: hidden;
}
.returnWrapper {
  display: flex;
  padding: 30px;
  background-color: #ffffff;
  // border-bottom: 1px solid #dddddd;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  .backBtn {
    position: absolute;
    left: 30px;
    top: 30px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .center {
    font-size: 30px;
  }
}
.fixed_toolbar {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #f5f5f5;
  z-index: 88;
  transform: translateZ(0);
}
.banner-wrapper {
  background-color: #fff;
  .banner {
    width: 100%;
  }
  .prompt {
    background-color: #fff;
    padding: 16px 30px;
    @include sc(28px, #2e2e2e);
    word-break: break-all;
    border-bottom: 20px solid #f5f5f5;
    span {
      padding: 0 5px;
      color: #fd0101;
    }
    p {
      color: #fd0101;
    }
  }
}
.header {
  width: 100%;
  height: 88px;
  background-color: #ffffff;
  display: flex;
  z-index: 9;
  border-bottom: 1px solid #f5f5f5;
  .item {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 88px;
    @include sc(32px, $black);
    border-bottom: 5px solid #fff;
  }
  .item.active {
    color: #3889ff;
    border-bottom: 5px solid #3889ff;
  }
  &.fixed {
    position: fixed;
    top: 88px;
    width: 100%;
  }
}
.gift-ul {
  background-color: #ffffff;
  display: flex;
  padding: 20px 20px 0 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  .gift-item {
    width: 48.5%;
    height: 578px;
    background-color: #ffffff;
    box-shadow: 0 0 10px #cecece;
    position: relative;
    margin-bottom: 20px;
    &:last-child {
      border-bottom: none;
    }
    .gift-pic {
      height: 330px;
      display: flex;
      align-items: center;
      justify-content: center;
      .pic {
        height: 100%;
        width: 100%;
      }
    }
    .info {
      padding: 0 20px;
      .name {
        @include sc(28px, #000);
        line-height: 38px;
        font-weight: 400;
        min-height: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        margin: 15px 0 0;
      }
      .num {
        @include sc(28px, #ff010d);
        display: flex;
        align-items: center;
        .limit {
          height: 30px;
          margin-right: 10px;
        }
        span {
          font-size: 28px;
        }
      }
      .kid {
        display: flex;
        flex-direction: row;
        p {
          @include sc(28px, #8b8a8a);
        }
        del {
          @include sc(24px, #8b8a8a);
          display: block;
          height: 30px;
          margin-top: 10px;
        }
      }
      p {
        @include sc(28px, #8b8a8a);
      }
    }
    .exchange-btn {
      position: absolute;
      right: 20px;
      bottom: 23px;
      // width: 140px;
      height: 50px;
      line-height: 45px;
      background-color: #fff;
      border: 1px solid #28b46a;
      border-radius: 8px;
      @include sc(22px, #28b46a);
      &.no-stock {
        color: #fff;
        border: 1px solid #b7b6b7;
        background-color: #b7b6b7;
      }
    }
  }
}
.end {
  background-color: #fff;
  @include sc(26px, #999);
  text-align: center;
  padding-bottom: 20px;
}

.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
